<template>
  <div class="login">
    <SimpleHeader v-if="true" :title="category"></SimpleHeader>
    <div class="logo-wrapper">
      <img class="mLogo" :src="mLogo" alt="" />
    </div>
    <div class="form-wrapper">
      <van-form @submit="submit">
        <van-field
          v-model="username"
          type="text"
          name="username"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="verify-wrapper">
          <!-- <Verify
            :barSize="{ width: '100%', height: '30px' }"
            :show-button="false"
            :vOffset="5"
            type="slide"
            @success="success"
            @error="error"
          /> -->
          <Verify
            ref="verify"
            :showButton="false"
            type="compute"
            width="40%"
            height="40px"
            fontSize="20px"
            @success="success"
            @error="error"
          ></Verify>
        </div>
        <div class="switch" @click="switchType">{{ switchText }}</div>
        <div class="button-wrapper">
          <van-button
            :text="category"
            type="primary"
            size="large"
            round
            class="submit-text"
            native-type="submit"
          ></van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import SimpleHeader from '../../components/SimpleHeader'
import Verify from 'vue2-verify'
import { register, login } from '@/api/user'
import { setItem } from '@/utils'
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  components: {
    SimpleHeader,
    Verify
  },
  data() {
    return {
      isLogin: true,
      mLogo: require('@/static/images/mlogo.png'),
      username: '',
      password: '',
      verified: false
    }
  },
  computed: {
    category() {
      return this.isLogin ? '登录' : '注册'
    },
    switchText() {
      return this.isLogin ? '立即注册' : '立即登录'
    }
  },
  methods: {
    ...mapActions({
      getUserInfo: 'user/getUserInfo'
    }),
    success(obj) {
      this.verified = true
      obj.refresh()
    },

    error() {
      this.verified = false
    },
    // 注册登录切换
    switchType() {
      this.isLogin = !this.isLogin
      this.username = ''
      this.password = ''
    },

    // 提交
    submit(values) {
      console.log(values)
      this.$refs.verify.$refs.instance.checkCode()
      if (!this.verified) {
        this.$toast.fail('验证码错误')
        return
      }
      if (this.isLogin) {
        this.loginApi(this.username, this.password)
      } else {
        this.registerApi(this.username, this.password)
      }
    },

    // 登录
    async loginApi(username, password) {
      const params = { loginName: username, passwordMD5: password }
      const res = await login(params).catch(err => {
        console.log(err)
        this.$toast.fail('请求失败')
      })
      if (res.resultCode === 200) {
        this.$toast.success('登录成功')
        setItem('token', res.data)
        this.getUserInfo({ token: res.data })
        this.$router.push('/home')
      }
    },

    // 注册
    async registerApi(username, password) {
      const params = { loginName: username, password }
      const res = await register(params).catch(err => {
        console.log(err)
        this.$toast.fail('请求失败')
      })
      if (res.resultCode === 200) {
        this.$toast.success('注册成功')
        this.switchType()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.login {
  padding: 0 0.53rem;
  .logo-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 2.13rem;
    .mLogo {
      width: 3.2rem;
      height: 3.2rem;
    }
  }
  .verify-wrapper {
    margin-top: 20px;
    /deep/.cerify-code-panel {
      display: flex;
      .verify-code-area {
        width: 58% !important;
        .verify-input-area {
          display: flex;
          align-items: center;
          width: 100px;
          height: 40px;
          margin-left: 15px;
          border: 1px solid #e9e9e9;
          .varify-input-code {
            padding-left: 5px;
            font-size: 18px;
          }
        }
        .verify-change-area {
          margin-left: 12px;
          > a {
            font-size: 14px;
          }
        }
      }
    }
  }
  .switch {
    display: inline-block;
    padding: 0.4rem 0.2rem 0.2rem;
    font-size: 0.36rem;
    color: #1989fa;
  }
  .button-wrapper {
    padding: 0.2rem 0.3rem 0;
  }
  .submit-text {
    height: 40px;
    background-color: @primary;
  }
}
</style>
